<template>
  <div class="data-table">
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="realname" label="姓名"> </el-table-column>
      <el-table-column prop="cname" label="角色"> </el-table-column>
      <el-table-column prop="username" label="账号"> </el-table-column>
      <el-table-column prop="sex" label="性别"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="birthday" label="生日"> </el-table-column>
      <el-table-column prop="avatar" label="头像">
        <template slot-scope="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.avatar"
            :preview-src-list="[row.avatar]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="editUserHandle(row.id)"> 修改 </el-button>
          <!-- 通过自定义指令完成按钮的显示或隐藏 -->
          <!-- <el-button type="danger" v-isShowSelfBtn="row.id" size="mini"> 删除 </el-button> -->
          <!-- 自定义方法来完成对应的需求 -->
          <el-button
            type="danger"
            v-if="isShowSelfBtn(row.id)"
            size="mini"
            @click="deleteUser(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="total !== 0"
      background
      :current-page="page"
      :page-size="pagesize"
      :page-sizes="[pagesize, 10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="currentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { deleteUidToInfoApi } from '@/api/userApi'

export default {
  props: ['page', 'tableData', 'total', 'loadData', 'setSelectUserIds', 'setDialogVisible'],
  data() {
    return {}
  },
  computed: {
    pagesize() {
      return Number(process.env.VUE_APP_PAGESIZE)
    }
  },
  methods: {
    isShowSelfBtn(id) {
      return !(this.$store.getters.userid === id)
    },
    editUserHandle(userid) {
      this.setDialogVisible(true, userid)
    },
    async deleteUser(userid) {
      try {
        await this.$confirm('您真的要删除此用户信息吗？', '删除提示', {
          confirmButtonText: '确认删除',
          cancelButtonText: '考虑一下'
        })
        // console.log('删除', userid)
        let ret = await deleteUidToInfoApi(userid)
        if (ret.code === 0) {
          // 删除成功后要再次请求一下数据
          this.loadData(this.page)
        }
      } catch (error) {}
    },
    currentChange(page) {
      let query = { ...this.$route.query, page }
      this.$router.replace({ query })
      this.loadData(page, this.$route.query)
    },
    handleSelectionChange(rows) {
      this.setSelectUserIds(rows.map(item => item.id))
    }
  }
}
</script>

<style lang="scss" scoped>
.data-table {
  background: #fff;
  padding: 10px;
  margin-top: 5px;
}
</style>
